<template>
	<view>
	<u-popup :show="show" @close="close" closeable>
	    <view class="category-box">
			<view class="header">修改分类</view>
			<view class="tab">
				<u-tag text="支出" @click="checkTab(1)" :type="tabActive === 1 ? 'primary' : 'info'"  
				:bgColor="tabActive === 1 ? '' : '#f5f5f5'" :borderColor="tabActive === 1 ? '' : '#f5f5f5'" 
				plain plainFill style="padding-right: 30rpx"></u-tag>
				<u-tag text="收入" @click="checkTab(2)" :type="tabActive === 2 ? 'warning' : 'info'" 
				:bgColor="tabActive === 2 ? '' : '#f5f5f5'" :borderColor="tabActive === 2 ? '' : '#f5f5f5'" 
				 plain
				 plainFill></u-tag>
			</view>
			<view class="content">
	        <u-grid :border="false" col="4" style="margin: 20rpx 0">
	       	<u-grid-item v-for="item in tabActive === 1 ? categoryPayList : categoryIncomeList" :key="item.id" @click="clickCategory(item)" style="margin-bottom: 30rpx">
	       		 <view 
	       		  :style="item.id ===  categoryId ? 'color: #7695e8' : 'color: #999'"
	       		  :class="item.id ===  categoryId ? `iconfont ${item.icon} active` : `iconfont ${item.icon}`"></view>	
	       		 <text :class="item.id === categoryId ? 
	       		  'grid-text active-text' : 'grid-text'">{{item.name}}</text>
	       	</u-grid-item>
	       </u-grid>
	    </view>
	 </view>
	</u-popup>
</view>
</template>

<script>
	import { getCategoryList } from '@/api/category.js'
	import { mapGetters } from  'vuex'
	export default {
		data() {
			return {
				show: true,
				categoryId: null,
				categoryName: '',
				icon: '',
				tabActive: 1,
				categoryPayList: [],
				categoryIncomeList: [],
			}
		},
		computed: {
			...mapGetters(['billDetail'])
		},
		mounted() {
			this.fetchCategory()
			this.categoryId = this.billDetail.category_id
			this.categoryName = this.billDetail.category_name
			this.icon = this.billDetail.icon
		},
		methods: {
			async fetchCategory() {
				const rsp = await getCategoryList()
				if(rsp.code === 0) {
					if(rsp.data.list.length > 0) {
						this.categoryPayList = rsp.data.list.filter(item => item.flag === 'pay')
						this.categoryIncomeList = rsp.data.list.filter(item => item.flag === 'income')
					}
				}
			},
			close() {
				const data = {
					categoryId: this.categoryId,
					categoryName: this.categoryName,
					icon: this.icon
				}
				this.$emit('closeCategory', data)
			},
			clickCategory(item) {
				this.categoryId = item.id
				this.categoryName = item.name
				this.icon = item.icon
				this.close()
			},
			checkTab(item) {
				this.tabActive = item
			}
		}
	}
</script>

<style lang="scss" scoped>
	.category-box {
		height: 80vh;
		display: flex;
		flex-direction: column;
		.header {
			text-align: center;
			padding: 25rpx 0;
		}
		.tab {
			display: flex;
			align-items: center;
			padding: 0 0 30rpx 60rpx;
		}
		.content {
			flex: 1;
			overflow: auto;
			.iconfont {
				font-size: 24px;
			}
			.grid-text {
				color: #999;
			}
			.active {
				color: #7695e8;
			}
			.active-text {
				color: #7695e8; 
			}
		}
	}
</style>